<template>
	<div>
		<Row style="background-color: whitesmoke;padding: 0.625rem;">
			<Col span="10" style="text-align: center;">
				<span>我的待办</span><br>
				<h3>{{count1}}个任务</h3>
			</Col>
			<Col span="4" style="text-align: center;">
				<Divider type="vertical"></Divider>
			</Col>
			<Col span="10" style="text-align: center;">
				<span>本学期完成任务数</span><br>
				<h3>{{count2}}个任务</h3>
			</Col>
		</Row>
		<div style="margin-top: 0.75rem;">
			<Card>
				<h3 slot="title">实践列表</h3>
					<Row>
						<Col span="24">
							<Tabs type="card" @on-click="changeTabs">
								<TabPane v-for="items in tags" :key="items.name" :label="items.name" :name="items.name">
									<Row v-for="item in showList">
										<Col :xs="{span:24}" :sm="{span:8}">
											<b>关于大学生课余时间安排的调查报告</b><br>
											<span>{{item.title}}</span>
										</Col>
										<Col :xs="{span:24}" :sm="{span:3}">
											<b>发布者</b><br>
											<span>{{item.name}}</span>
										</Col>
										<Col :xs="{span:24}" :sm="{span:3}">
											<b>发布时间</b><br>
											<span>{{item.startTime}}</span>
										</Col>
										<Col :xs="{span:24}" :sm="{span:3}">
											<b>截止时间</b><br>
											<span>{{item.endTime}}</span>
										</Col>
										<Col :xs="{span:24}" :sm="{span:3}">
											<Button :type="item.type" >{{item.ses}}</Button>
										</Col>
										<Col :xs="{span:24}" :sm="{span:3,offset:1}">
											<span v-if="item.type=='warning'">
												<a href="#" @click.prevent="finish">去完成</a>
											</span>
											<span v-if="item.type=='success'">
												得分{{item.grade}}
												<a href="#" @click.prevent="lookpoint">查看</a>
												<!-- 此处要阻止默认事件 -->
											</span>
										</Col>
										<Divider></Divider>
									</Row>
								</TabPane>
								<div slot="extra" style="margin-left:12.5rem ;">
									<label for="search">关键字:</label>
									<input type="text" placeholder="请输入关键字" v-model="keyValue" class="search" id="search"></input>
									<Button class="but" type="warning">查询</Button>
									<Button @click="changeTag" class="but">重置</Button>
								</div>
							</Tabs>
						</Col>
					</Row>
				<Row>
					<Col offset="16" span="8">
						<template>
							<Page :total='dataCount' :page-size="pageSize" @on-change="changePage" show-elevator />
						</template>
					</Col>
				</Row>
			</Card>			
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				//数据总条数
				dataCount:0,
				pageSize:10,
				currentpage:1,
				//这是完成和进行的数目
				count1:8,
				count2:2,
				//这是关键字搜索的
				keyValue:'',
				//这是标签
				tags:[
					{
						name:"全部"
					},
					{
						name:'已完成'
					},
					{
						name:'未完成'
					}
				],
				//这是获取到的所有数据
				items:[
					{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-03-10 16：00；20',
						endTime:'2019-04-10 16：00；20',
						type:'warning',
						ses:'进行中',
						grade:''
					},
					{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:22
					},
					{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:23
					},{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:24
					},
					{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:23
					},{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:24
					},
					{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:23
					},{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:24
					},
					{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:23
					},{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:24
					},
					{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:23
					},{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:24
					},
					{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:23
					},{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:24
					},
					{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:23
					},{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:24
					},
					{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:23
					},{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:24
					},
					{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:23
					},{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:24
					},
					{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:23
					},{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:24
					},
					{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:23
					},{
						title:'大学是人生最美好的一个阶段，也是积累知识，丰富自己的关键时期',
						name:'李吉祥',
						startTime:'2019-05-10 16：00；20',
						endTime:'2019-06-10 16：00；20',
						type:'success',
						ses:'已结束',
						grade:24
					}
				],
				//这是显示的数据
				showList:[]
			}
		},
		methods:{
			initP:function(){
				this.dataCount = this.items.length
				this.showList = this.items.slice(0,this.pageSize)
				console.log(this.dataCount)
			},
			changeTag:function(){
				console.log("sss")
				console.log(this.$store.state.second)
				this.keyValue=''
			},
			lookpoint:function(){
				this.$router.push({name:'practisegroup'})
			},
			changePage:function(index){
				var _start = (index-1) * this.pageSize;
				var _end = index * this.pageSize
				this.showList=this.items.slice(_start,_end)
			},
			changeTabs:function(val){
				console.log(val)
				//这是点击的时候跳转
			},
			finish:function(){
				this.$router.push({name:'practisegroup'})
			}
		},
		created(){
			this.initP()
		}
	}
</script>

<style scoped>
.ivu-divider.ivu-divider-vertical.ivu-divider-default{
	height: 4rem;
}
.ivu-card /deep/ .ivu-card-head{
	background: whitesmoke;
}
.search{
	height: 1.8rem;
	border-radius: 0.3125rem;
	border: whitesmoke 0.125rem solid;
}
.but{
	margin-left: 0.75rem;
}
/deep/ .ivu-tabs-nav .ivu-tabs-tab-active,
/deep/ .ivu-tabs-nav-container:focus .ivu-tabs-tab-focused,
/deep/ .ivu-tabs-nav-container:focus .ivu-tabs-tab-focused,
/deep/.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active,
/deep/.ivu-tabs-nav .ivu-tabs-tab:hover,
/deep/ .ivu-tabs-nav-container:focus .ivu-tabs-tab-focused{
	color: orange;
}
/deep/.ivu-tabs-nav-container:focus .ivu-tabs-tab-focused {
	border-color:orange!important;
}
</style>
